<template>
   <header class="w-full shadow-md">
    <div class="container mx-auto">
      <div class="flex items-center justify-between py-4">
        <!-- Logo部分 -->
        <div class="flex items-center">
          <img src="@/assets/img/Tencent_EN.png" alt="Logo" class="h-8">
        </div>
        
        <!-- 搜索框部分 -->
        <div class="flex items-center">
          <input 
            type="text" 
            placeholder="Input Part Number / Keyword" 
            v-model="searchText"
            style="width: 500px"
            class="px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:border-primary"
          >
          <button 
            @click="handleSearch"
            class="px-4 py-2 bg-primary text-white rounded-r-md hover:bg-opacity-90"
          >
            搜索
          </button>
        </div>
        
        <!-- 登录部分 -->
        <div class="flex items-center space-x-4" >
          <!-- <button @click="handleCart" class="btn btn-outline">
            购物车
          </button>
          <button @click="handleLogin" class="btn btn-outline">
            登录
          </button>
          <button @click="handleRegister" class="btn btn-primary">
            注册
          </button> -->
        </div>
      </div>
    </div>
    
    <!-- 导航菜单 -->
    <nav class=" w-full shadow-md relative z-10 nav-menu">
      <div class="container mx-auto">
        <div class="flex space-x-8 py-4">
          <router-link 
            v-for="item in menuItems" 
            :key="item.path" 
            :to="item.path"
            class="text-gray-600 hover:text-primary text-center transition-colors"
            :class="{ 'text-primary font-medium': $route.path === item.path }"
          >
            {{ item.name }}
          </router-link>
        </div>
      </div>
    </nav>
  </header>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'

const searchText = ref('')
const menuItems = ref([
  { name: 'Home', path: '/home' },
  { name: 'Brand', path: '/brand' },
  { name: 'Send RFQ', path: '/rfq' },
  { name: 'About', path: '/about' }
])

const handleSearch = () => {
  console.log('搜索:', searchText.value)
}

const handleLogin = () => {
  console.log('登录')
}

const handleRegister = () => {
  console.log('注册')
}

const handleCart = () => {
  console.log('购物车')
}

</script>

<style scoped lang="scss">
.header {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-menu {
  border-top: 1px solid #f0f0f0;
}

.nav-menu a {
  text-decoration: none;
  color: #333;
}

.nav-menu a:hover {
  color: #1890ff;
}

.nav-menu a.router-link-active {
  color: #1890ff;
}

.logo {
  width: 200px;
  img {
    width: 100%;
    object-fit: cover;
  }
}
</style>